<template>
  <el-row :gutter="20">
    <el-col :span="11">
      <div class="grid-content bg-purple">
        <el-card :body-style="{ padding: '100px' }">
          <el-upload
            align="middle"
            drag
            action=""
            multiple
            :file-list="fileList"
            :limit="2"
            :auto-upload="false"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="getFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>

            <div class="el-upload__tip" slot="tip">
              只能上传jpg/txt文件，且不超过500kb
            </div>
          </el-upload>
        </el-card>

        <el-card :body-style="{ padding: '20px' }">
          <div style="padding: 14px">
            <span class="demonstration">选项</span>
          </div>
          <el-form :inline="false" class="demo-form-inline">
            <el-form-item label="底板颜色">
              <el-color-picker
                v-model="color"
                color-format="hex"
                :predefine="predefineColors"
                size="medium"
              >
              </el-color-picker>
            </el-form-item>

            <el-form-item label="生成词云">
              <el-button
                style="margin-left: 10px"
                size="small"
                type="primary"
                @click="submitUpload"
                >上传</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>

        <el-card :body-style="{ padding: '20px' }">
          <div class="demo-image__placeholder">
            <div class="block">
              <div style="padding: 14px">
                <span class="demonstration">您上传的图片</span>
              </div>
              <el-image :src="src" fit="contain">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>

    <el-col :span="12">
      <div class="grid-content bg-purple" v-loading="loading">
        <el-card :body-style="{ padding: '20px' }">
          <div style="padding: 14px">
            <span>词云</span>
          </div>
          <img style="height: 100%" :src="wordcloud" class="image" />
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      image: "",
      word: "",
      identifier: "",
      wordcloud:
        "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
      color: "#482936",
      loading: false,
      fileList: [],
      predefineColors: ["#f0c9cf", "#2b1216", "#ede3e7", "#e2e1e4"],
    };
  },
  methods: {
    submitUpload() {
      // TODO Axios发送请求
      if (!this.image || !this.word) return;
      this.loading = true;
      this.$axios({
        url: "http://127.0.0.1:5000/api/images/wordcloud",
        method: "post",
        data: JSON.stringify({
          image: this.image,
          word: this.word,
          color: this.color,
        }),
        headers: {
          "Content-Type": "application/json",
        }
      }).then((response) => {
        // console.log(response.data);
        this.identifier = response.data.identifier
        // console.log(this.identifier)
        // 循环请求
        let timer = setInterval(() => {
          this.$axios({
            url: `http://127.0.0.1:5000/api/images/${this.identifier}`,
            method: 'get'
          }).then((result) => {
            // console.log(result);
            // console.log(result.data.status);
            if (result.data.status === 0) {
              clearInterval(timer)
              this.wordcloud = "data:image/.+;base64," + result.data.image
              this.loading = false
            }
          })
        }, 3000)
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    handlePreview(file) {
      console.log(file);
    },

    getFile(file, fileList) {
      if (file.raw.type === "image/jpeg" || file.raw.type === "image/png") {
        this.src = window.URL.createObjectURL(file.raw);
        this.getBase64(file.raw).then((res) => {
          this.image = res;
          // console.log(this.image);
        });
      }
      if (file.raw.type === "text/plain") {
        this.getText(file);
      }
    },

    // 处理图片文件
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },

    // 处理文本文件
    getText(file) {
      let reader = new FileReader();
      reader.readAsText(file.raw);
      reader.onload = (e) => {
        this.word = e.target.result;
        console.log(this.word)
      };
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 10px;
}
.el-form {
  margin-top: 10px;
}

.grid-content {
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
